<template>
  <a-modal
    title="导入结果"
    :visible="visible"
    :width="600"
    :maskClosable="false"
    :keyboard="false"
    @ok="handleModalOk"
    @cancel="handleModalCancel"
  >
    <div class="result-info">
      <div class="result-number">
        <span style="color:#b7eb8f;">{{ '成功:' + oks }}</span
        ><span style="margin-left: 20px;color:#ffa39e">{{ '失败:' + errs }}</span>
      </div>
      <div class="result-sheets">
        <a-select
          v-model="selectedSheetName"
          style="width: 100%"
          @change="handleChange"
          v-if="map"
          placeholder="切换查看子表错误原因"
          size="small"
        >
          <a-select-option v-for="x in sheetNames" :key="x" :value="x">{{ x }}</a-select-option>
        </a-select>
      </div>
    </div>
    <a-table :columns="exportColumns" :dataSource="errors" :pagination="false" size="small" rowKey="rowNum"></a-table>
    <template slot="footer">
      <a-button @click="handleModalCancel">取消</a-button>
      <a-button
        key="submit"
        type="primary"
        :loading="confirmLoading"
        @click="handleModalOk"
        :disabled="oks === 0"
      >确认</a-button
      >
    </template>
  </a-modal>
</template>

<script>
export default {
  name: 'ImportResultModal',
  props: {
    fieldMap: {
      type: Object,
      default: () => ({
        name: 'name',
        targetId: 'targetId'
      })
    },
    confirmUpload: {
      type: Function | null,
      default: null
    }
  },
  data () {
    return {
      visible: false,
      exportColumns: [
        {
          title: '序号',
          dataIndex: 'rowNum'
        },
        {
          title: this.fieldMap.title ? this.fieldMap.title : '名字',
          dataIndex: this.fieldMap.name,
          width: '20%',
          ellipses: true
        },
        {
          title: '错误原因',
          dataIndex: 'errorMsg',
          width: '60%',
          ellipses: true
        }
      ],
      confirmLoading: false,
      key: '',
      ok: [],
      oks: 0,
      errs: 0,
      errors: [],
      targetId: 0,
      map: null,
      sheetNames: [],
      selectedSheetName: ''
    }
  },
  methods: {
    show (result) {
      /*
       * key: 上传的key，后端提供
       * ok: 成功的条目
       * oks：成功的个数，如果是0，确定按钮禁用无法确认
       * errs：错误的个数
       * errors：失败的条目
       * targetId：选中的目前导入节点，从前端传进来
       */
      const { key, ok, oks, errs, errors, targetId, map, sheetNames } = result
      this.key = key
      this.ok = ok
      this.oks = oks
      this.errs = errs
      if (map && sheetNames) {
        // 如果有子表
        this.map = map
        this.sheetNames = sheetNames
        this.selectedSheetName = sheetNames[0]
        this.handleChange(this.selectedSheetName)
      } else {
        // 单张表
        this.errors = errors
          ? errors.map((ele, index) => {
            if (!ele.hasOwnProperty('id')) {
              ele.id = index
            }
            return ele
          })
          : []
      }
      this.targetId = targetId
      this.visible = true
    },

    handleChange (val) {
      const map = this.map[val]
      this.errors = map ? map.errors : []
    },
    handleModalOk () {
      if (this.confirmUpload) {
        const data = {
          isInsert: true,
          key: this.key,
          [this.fieldMap.targetId]: this.targetId
        }
        this.confirmLoading = true
        this.confirmUpload(data)
          .then(res => {
            this.visible = false
            this.$message.success(res.message)
            this.$emit('ok', !!this.map)
            this.resetModal()
          })
          .catch(err => {})
          .finally(() => {
            this.confirmLoading = false
          })
      } else {
        this.visible = false
        const { ok, oks, errs, errors } = this
        this.$emit('ok', { ok, oks, errs, errors })
        this.resetModal()
      }
    },

    handleModalCancel () {
      if (this.confirmUpload) {
        const data = {
          isInsert: false,
          key: this.key,
          [this.fieldMap.targetId]: this.targetId
        }
        this.confirmUpload(data)
          .then(res => {
            this.visible = false
            this.resetModal()
          })
          .catch(err => {})
      } else {
        const { ok, oks, errs, errors } = this
        this.visible = false
        this.resetModal()
      }
    },

    resetModal () {
      this.key = ''
      this.oks = 0
      this.errs = 0
      this.errors = []
      this.targetId = 0
    }
  }
}
</script>
<style lang="less">
.result-info {
  display: flex;
  margin-bottom: 20px;
}
.result-number {
  flex: 1;
}
.result-sheets {
  width: 200px;
}
</style>
